<template>
    <admin-container :loading="loading">
        <k-form :model="form" @submit="onSubmit">
            <k-form-item label="角色名称"
                         prop="name"
                          :rules="[{ required: true, message: '请填写角色名称' }]">
                <el-input v-model="form.name"/>
            </k-form-item>

            <k-form-item label="显示顺序" prop="sort">
                <el-input v-model="form.sort"/>
            </k-form-item>

            <k-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea"/>
            </k-form-item>

            <k-form-item>
                <div style="display: inline-block; width: 100%">
                    <k-transfer v-model="form.permission"/>
                </div>
            </k-form-item>

            <k-form-item>
                <el-button type="primary" native-type="submit" :loading="subing">保存</el-button>
            </k-form-item>
        </k-form>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import KTransfer from './components/transfer.vue';
import KForm from '@/components/form/KForm.vue';
import KFormItem from '@/components/form/KFormItem.vue';
import { postAuthRole } from '@/services/auth/role.service';

@Component({
    components: { KFormItem, KForm, KTransfer, AdminContainer }
})
export default class Page extends Vue {
    loading: boolean = true;
    form: any = {
        permission: [],
    };
    subing: boolean = false;

    get title(): string {
        return this.$route.query.id ? '编辑角色信息' : '添加角色';
    }

    get id(): number {
        return Number(this.$route.query.id);
    }

    mounted() {
        if (!this.id) {
            this.loading = false;
        }
    }

    async onSubmit() {
        const result = await postAuthRole(this.form);
        console.log('form', result);
    }
}
</script>
